// VueVditor.vue
<script setup lang="ts">
import { onMounted, ref, watch, toRaw, onUnmounted, unref } from 'vue'
import Vditor from 'vditor'
import 'Vditor/dist/index.css'

const emit = defineEmits(['update:modelValue', 'after', 'focus', 'blur', 'esc', 'ctrlEnter', 'select'])

const props = defineProps({
  options: {
    type: Object,
    default() {
      return {}
    }
  },
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: 'auto'
  }
})

const contentEditor = ref<Vditor | null>(null)
const editorRef = ref<HTMLElement | null>(null)

onMounted(() => {
  contentEditor.value = new Vditor(editorRef.value as HTMLElement, {
    ...props.options,
    value: props.modelValue,
    cache: {
      enable: false
    },
    fullscreen: {
      index: 3000
    },
    after() {
      emit('after', toRaw(contentEditor.value))
      contentEditor.value?.disabled()
    },
    input(value: string) {
      emit('update:modelValue', value)
    },
    focus(value: string) {
      emit('focus', value)
    },
    blur(value: string) {
      emit('blur', value)
    },
    esc(value: string) {
      emit('esc', value)
    },
    ctrlEnter(value: string) {
      emit('ctrlEnter', value)
    },
    select(value: string) {
      emit('select', value)
    }
  })
})

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== contentEditor.value?.getValue()) {
      contentEditor.value?.setValue(newVal)
    }
  }
)

onUnmounted(() => {
  const editorInstance = unref(contentEditor)
  if (!editorInstance) return
  try {
    editorInstance?.destroy?.()
  } catch (error) {
    console.log(error)
  }
})
</script>

<template>
  <div
    class="editor-container"
    :style="{
      height: props.height
    }"
  >
    <div ref="editorRef" style="height: 100%"></div>
  </div>
</template>

<style>
.vditor-preview__action {
  display: none;
}
</style>
<style scoped lang="scss">
.editor-container {
  //height: 100%;
  width: auto;
  ::v-deep(.vditor-toolbar) {
    display: none;
  }
  ::v-deep(.vditor) {
    border: none;
    box-shadow: var(--vs-box-shadow-dark);
    border-radius: var(--vs-border-radius);
    .vditor-ir>.vditor-reset{
      padding: 16px 24px !important;
    }
    .vditor-ir pre.vditor-reset[contenteditable="false"]{
      opacity: 1;
      cursor: default;
    }
  }
}
</style>
